<template>
  <HeaderLayout title = '我的收藏' :visibleMenu="false">
    <div class="back" slot='left' @click="handleBack"><Icon name = 'arrow-left' /></div>
    
    <div class="list">
      <SwipeCell
        v-for="(v, i) in data"

        :right-width = "42"
        :key="i"

        :data-id="i"
      >
        <Card

          :startDate = "v.startDate"
          :endDate = "v.endDate"
          :title = "v.title"
          :location = "v.location"
          :flat = "true"
        >
          <Button slot='right' @click="handleJoin(v, i, $event)" type = 'primary' :disabled="v.status === 1">{{ v.status === 0 ? '报名参会' : '已报名' }}</Button>
        </Card>
        <div class="swipe-delete" slot = 'right' @click = "handleDelete(v, i, $event)">删除</div>
      </SwipeCell>
    </div>
  </HeaderLayout>
</template>

<script>

import { Icon, Button, SwipeCell } from 'vant'
import HeaderLayout from '@/layout/headerLayout/index.vue'
import Card from '@/component/card/index.vue'

// 模拟数据
function fakeData () {
  return [...Array(10)].map((v, i) => ({
    startDate: new Date().getTime(),
    endDate: new Date().getTime(),
    title: '第二届中国医师协会神经介入年会',
    location: '广州南丰朗豪酒店',
    status: i % 2
  }))
}

export default {

  name: 'index',

  data () {
    return {
      data: fakeData()
    }
  },

  methods: {
    handleBack: function () {
      this.$router.go(-1)
    },
    handleJoin: function (v, i, e) {
      if (v.status === 0) {
        return
      }

      this.$router.push('/pay')
    },
    handleDelete: function (v, i, e) {
      console.log(v, i)

      this.data = this.data.filter((_v, _i) => i !== _i)
    }
  },

  components: {
    HeaderLayout,
    Icon,
    SwipeCell,
    Button,
    Card,
  },
}

</script>

<style lang="less" scoped>

.back {
  i {
    color: #fff;
  }
}

.list {
  .card {
    margin: 6px 0;
  }
}

.swipe-delete {
  background: #f91a07;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  width: 42px;
  height: 100%;
  margin-left: 4px;
}

</style>